<template>

<el-row class="container">
  <el-col :span="3">
    <el-menu default-active="2" class="el-menu-vertical-demo nav-sty" @open="handleOpen" @close="handleClose" theme="dark">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>Basic</template>
        <el-menu-item-group>
          <el-menu-item index="1-1"><router-link to="/home">Layout 布局</router-link></el-menu-item>
          <el-menu-item index="1-2"><router-link to="/sb">Color 色彩</router-link></el-menu-item>
          <el-menu-item index="1-3"><router-link to="/sb">Typography 字体</router-link></el-menu-item>
          <el-menu-item index="1-4"><router-link to="/sb">Icon 图标</router-link></el-menu-item>
          <el-menu-item index="1-4"><router-link to="/sb">Button 按钮</router-link></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>Form</template>
        <el-menu-item-group>
          <el-menu-item index="2-1"><router-link to="/radio">Radio 单选框</router-link></el-menu-item>
          <el-menu-item index="2-2"><router-link to="/checkbox">Checkbox 多选框</router-link></el-menu-item>
          <el-menu-item index="2-3"><router-link to="/input">Input 输入框</router-link></el-menu-item>
          <el-menu-item index="2-4"><router-link to="/sb">InputNumber 计数器</router-link></el-menu-item>
          <el-menu-item index="2-4"><router-link to="/sb">Select 选择器</router-link></el-menu-item>
          <el-menu-item index="2-1"><router-link to="/sb">Switch 开关</router-link></el-menu-item>
          <el-menu-item index="2-2"><router-link to="/sb">Slider 滑块</router-link></el-menu-item>
          <el-menu-item index="2-3"><router-link to="/sb">TimePicker 时间选择器</router-link></el-menu-item>
          <el-menu-item index="2-4"><router-link to="/sb">DatePicker 日期选择器</router-link></el-menu-item>
          <el-menu-item index="2-4"><router-link to="/sb">DateTimePicker 日期时间选择器</router-link></el-menu-item>
          <el-menu-item index="2-1"><router-link to="/sb">Upload 上传</router-link></el-menu-item>
          <el-menu-item index="2-2"><router-link to="/sb">Rate 评分</router-link></el-menu-item>
          <el-menu-item index="2-3"><router-link to="/sb">ColorPicker 颜色选择器</router-link></el-menu-item>
          <el-menu-item index="2-4"><router-link to="/sb">Form 表单</router-link></el-menu-item>
        </el-menu-item-group>
        </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-menu"></i>Data</template>
        <el-menu-item-group>
          <el-menu-item index="3-1"><router-link to="/home">Table 表格</router-link></el-menu-item>
          <el-menu-item index="3-2"><router-link to="/sb">Tag 标签</router-link></el-menu-item>
          <el-menu-item index="3-3"><router-link to="/sb">Progress 进度条</router-link></el-menu-item>
          <el-menu-item index="3-4"><router-link to="/sb">Tree 树形控件</router-link></el-menu-item>
          <el-menu-item index="3-4"><router-link to="/sb">Pagination 分页</router-link></el-menu-item>
          <el-menu-item index="3-1"><router-link to="/sb">Badge 标记</router-link></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title"><i class="el-icon-menu"></i>Notice</template>
        <el-menu-item-group>
          <el-menu-item index="4-1"><router-link to="/home">Alert 警告</router-link></el-menu-item>
          <el-menu-item index="4-2"><router-link to="/sb">Loading 加载</router-link></el-menu-item>
          <el-menu-item index="4-3"><router-link to="/sb">Message 消息提示</router-link></el-menu-item>
          <el-menu-item index="4-4"><router-link to="/sb">MessageBox 弹框</router-link></el-menu-item>
          <el-menu-item index="4-4"><router-link to="/sb">Notification 通知</router-link></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title"><i class="el-icon-menu"></i>Navigation</template>
        <el-menu-item-group>
          <el-menu-item index="5-1"><router-link to="/home">NavMenu 导航菜单</router-link></el-menu-item>
          <el-menu-item index="5-2"><router-link to="/sb">Tabs 标签页</router-link></el-menu-item>
          <el-menu-item index="5-3"><router-link to="/sb">Breadcrumb 面包屑</router-link></el-menu-item>
          <el-menu-item index="5-4"><router-link to="/sb">Dropdown 下拉菜单</router-link></el-menu-item>
          <el-menu-item index="5-4"><router-link to="/sb">Steps 步骤条</router-link></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title"><i class="el-icon-menu"></i>Others</template>
        <el-menu-item-group>
          <el-menu-item index="6-1"><router-link to="/home">Dialog 对话框</router-link></el-menu-item>
          <el-menu-item index="6-2"><router-link to="/1">Tooltip 文字提示</router-link></el-menu-item>
          <el-menu-item index="6-3"><router-link to="/2">Popover 弹出框</router-link></el-menu-item>
          <el-menu-item index="6-4"><router-link to="/2">Card 卡片</router-link></el-menu-item>
          <el-menu-item index="6-4"><router-link to="/3">Carousel 走马灯</router-link></el-menu-item>
          <el-menu-item index="6-1"><router-link to="/4">Collapse 折叠面板</router-link></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-col>
  <el-col :span="21" style="padding:10px;">
    <el-breadcrumb separator="/" class="bra">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
<transition name="slide-fade">
<router-view class="content"></router-view>
  </transition>
  </el-col>
  
</el-row>
  </template>
<script>
  export default {
    methods: {
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }
</script>
<style type="stylus">
  .container{ padding-top: 80px; border-radius: 0; height: 100%; width: 100%; }

.nav-sty{    
    height: calc(100%-72px);
    border-radius: 0;
    background-color: #20202A;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.3);
}
</style>
